<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <caption>商品列表</caption>
    <tr><th>标题</th><th>价格</th><th>销量</th></tr>
</table>
<script>
  //创建自定义对象
  let p1 = {};//实例化一个空对象
  //动态给对象添加属性和方法
  p1.name = "张三"
  p1.age = 18;
  p1.run = function (){
    console.log(this.name+":"+this.age)
  }
  p1.run();
  //实例化一个自带属性和方法的对象
  let p2 = {
      name:"李四",
      age:20,
      run:function (){
          console.log(this.name+":"+this.age)
      }
  }
  p2.run();

  let product = {title:"小米手机",price:3000,num:100}
  let arr = [{title:"小米手机",price:3000,num:100},
             {title:"华为电视",price:2000,num:500},
             {title:"海尔洗衣机",price:1000,num:50}]
  let table = document.querySelector("table")
  for (let p of arr) {
      let tr = document.createElement("tr")
      let titleTd = document.createElement("td")
      let priceTd = document.createElement("td")
      let numTd = document.createElement("td")
      titleTd.innerText = p.title
      priceTd.innerText = p.price
      numTd.innerText = p.num
      tr.append(titleTd,priceTd,numTd)
      table.append(tr)
  }

</script>
</body>
</html>